<!--查看应聘者，米娜事，考核，录用-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox" v-if="resumeDetail">
      <div class="cornerComment-in-title">
        <!--        resumeType 1 查看简历 2 待处理的简历 3 待面试简历 4 考核中的应聘者 5 一录用应聘者-->
        <span>{{ resumeDetail ? resumeDetail.name : '' }}-简历详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="resumeBody" v-if="resumeDetail">
          <div class="resumeBody-left">
            <div class="resumeBody-left-line">
              <div class="resumeBody-left-line-title">
                姓名
              </div>
              <div class="resumeBody-left-line-box">
                {{ resumeDetail.name }}
              </div>
              <div class="resumeBody-left-line-title">
                性别
              </div>
              <div class="resumeBody-left-line-box">
                {{ resumeDetail.sex == 1 ? '男' : '女' }}
              </div>
              <div class="resumeBody-left-line-title">
                电话
              </div>
              <div class="resumeBody-left-line-box">
                {{ resumeDetail.mobile_phone }}
              </div>
            </div>
            <div class="resumeBody-left-line">
              <div class="resumeBody-left-line-title">
                年龄
              </div>
              <div class="resumeBody-left-line-box">
                {{ resumeDetail.age }}
              </div>
              <div class="resumeBody-left-line-title">
                学历
              </div>
              <div class="resumeBody-left-line-box">
                {{ resumeDetail.edu.name }}
              </div>
              <div class="resumeBody-left-line-title">
                工龄
              </div>
              <div class="resumeBody-left-line-box">
                {{ resumeDetail.experience }}
              </div>
            </div>
            <div class="resumeBody-left-line">
              <div class="resumeBody-left-line-title">
                个人简历
              </div>
              <div class="resumeBody-left-line-box">
                <viewerModle type="1" :imgSrc="resumeDetail.material.resume"></viewerModle>
              </div>
              <div class="resumeBody-left-line-title">
                个人信用
              </div>
              <div class="resumeBody-left-line-box">
                <viewerModle type="1" :imgSrc="resumeDetail.material.credit"></viewerModle>
              </div>
              <div class="resumeBody-left-line-title">
                毕业证书
              </div>
              <div class="resumeBody-left-line-box">
                <viewerModle type="1" :imgSrc="resumeDetail.material.diploma"></viewerModle>
              </div>
            </div>
          </div>
          <div class="resumeBody-right">
            <img :src="resumeDetail.pic" v-if="resumeDetail.pic">
            <img src="@/assets/imageAdmin/defultimg.jpg" alt="" v-else>
          </div>
        </div>
        <!--        进度-->
        <div class="order-edit-timeline-content">
          <div class="order-edit-timeline-list orderActive">
            <div class="list-content">
              <div class="list-content-left"></div>
              <div class="list-content-right"
                   :class="resumeDetail.statuss>=1?'border-arrived':'border-not-arrived'"></div>
              <div class="iconfont iconquan">
                <div class="domContainer" v-if="resumeDetail.statuss>=0">
                  <div class="dot"></div>
                  <div class="pulse"></div>
                  <div class="pulse-big"></div>
                </div>
              </div>
            </div>
            <div class="title-content">
              简历投递
            </div>
            <div class="time-content">
              <p>{{resumeDetail.create_time}}</p>
            </div>
          </div>
          <div class="order-edit-timeline-list" :class="resumeDetail.statuss>=1?'orderActive':''">
            <div class="list-content">
              <div class="list-content-left"
                   :class="resumeDetail.statuss>=1?'border-arrived':'border-not-arrived'"></div>
              <div class="list-content-right border-not-arrived"
                   :class="resumeDetail.statuss>=4?'border-arrived':'border-not-arrived'"></div>
              <div class="iconfont" :class="resumeDetail.statuss>=1?'iconquan':'iconquan1'">
                <div class="domContainer" v-if="resumeDetail.statuss>=1">
                  <div class="dot"></div>
                  <div class="pulse"></div>
                  <div class="pulse-big"></div>
                </div>
              </div>
            </div>
            <div class="title-content">
              简历审核
            </div>
            <div class="time-content" v-if="resumeDetail.statuss>=1">
              <p>{{ resumeDetail.examine_time }}</p>
              <p>审核人：{{ resumeDetail.examineuser.realname }}</p>
              <p v-if="resumeDetail.statuss!==2">结论：审核通过,预约面试时间{{ resumeDetail.recruit_time }}</p>
              <p v-else>结论：审核驳回,内容：{{resumeDetail.reject_data?resumeDetail.reject_data:'--'}}</p>
            </div>
          </div>
<!--          0简历待审核1待面试2简历驳回3面试淘汰4试用中5正式员工6试用淘汰7离职中8离职通过9离职驳回-->
          <div class="order-edit-timeline-list" :class="resumeDetail.statuss>=3?'orderActive':''">
            <div class="list-content">
              <div class="list-content-left"
                   :class="resumeDetail.statuss>=3?'border-arrived':'border-not-arrived'"></div>
              <div class="list-content-right"
                   :class="resumeDetail.statuss>=4?'border-arrived':'border-not-arrived'"></div>
              <div class="iconfont" :class="resumeDetail.statuss>=3?'iconquan':'iconquan1'">
                <div class="domContainer" v-if="resumeDetail.statuss>=3">
                  <div class="dot"></div>
                  <div class="pulse"></div>
                  <div class="pulse-big"></div>
                </div>
              </div>
            </div>
            <div class="title-content">
              面试审核
            </div>
            <div class="time-content" v-if="resumeDetail.statuss>=3">
              <p>{{ resumeDetail.trail_time }}</p>
              <p>审核人：{{ interview_user }}</p>
              <p v-if="resumeDetail.statuss>=4">结论：面试通过，进入考核</p>
              <p v-if="resumeDetail.statuss==3">结论：面试淘汰</p>
              <p><span @click="showPreview(1)">查看面试详情</span></p>
            </div>
          </div>
          <!--          // statuss 0 简历待审核 1 待面试 2 简历驳回不符合 3 面试淘汰 4 考核中 5 录用 6 考核不通过 7 离职中 8 离职通过 9 离职驳回-->
          <div class="order-edit-timeline-list" :class="resumeDetail.statuss>=4?'orderActive':''">
            <div class="list-content">
              <div class="list-content-left"
                   :class="resumeDetail.statuss>=3?'border-arrived':'border-not-arrived'"></div>
              <div class="list-content-right"
                   :class="resumeDetail.statuss>=5?'border-arrived':'border-not-arrived'"></div>
              <div class="iconfont" :class="resumeDetail.statuss>=3?'iconquan':'iconquan1'">
                <div class="domContainer" v-if="resumeDetail.statuss>=4">
                  <div class="dot"></div>
                  <div class="pulse"></div>
                  <div class="pulse-big"></div>
                </div>
              </div>
            </div>
            <div class="title-content">
              录用审核
            </div>
            <div class="time-content" v-if="resumeDetail.statuss>=5">
              <p>{{ resumeDetail.employ_time }}</p>
              <p>审核人：{{ assessment_user }}</p>
              <p v-if="resumeDetail.statuss>=5">
                <em v-if="resumeDetail.statuss==6">结论：录用审核不通过，不予录用</em>
                <em v-else>结论：录用审核通过</em>
              </p>
<!--              <p v-if="resumeDetail.statuss==6">内容：考核不通过</p>-->
              <p><span @click="showPreview(2)">查看录用审核详情</span></p>
            </div>
          </div>
          <div class="order-edit-timeline-list" :class="resumeDetail.statuss>=5?'orderActive':''">
            <div class="list-content">
              <div class="list-content-left border-not-arrived"
                   :class="resumeDetail.statuss>=5?'border-arrived':'border-not-arrived'"></div>
              <div class="list-content-right"></div>
              <div class="iconfont" :class="resumeDetail.statuss>=5?'iconquan':'iconquan1'">
                <div class="domContainer" v-if="resumeDetail.statuss>=5">
                  <div class="dot"></div>
                  <div class="pulse"></div>
                  <div class="pulse-big"></div>
                </div>
              </div>
            </div>
            <div class="title-content">
              {{ resumeDetail.statuss >= 5 ? resumeDetail.status : '录用结果' }}
            </div>
            <!--            <div class="time-content" v-if="resumeDetail.statuss>=5">-->
            <!--              <p>2021-07-22</p>-->
            <!--              <p>审核人：郑和/嫦娥/校长</p>-->
            <!--              <p>内容：完成考核，考核通过，已录用</p>-->
            <!--            </div>-->
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer" v-if="resumeType=='show'">
        <el-button @click="closePOpup" size="small">返回</el-button>
      </div>
      <div class="cornerComment-in-footer" v-else>
        <el-button @click="closePOpup" size="small">返回</el-button>
        <!--        简历审核进行预约面试 -->
        <el-button type="primary" @click="getApplyTime(1)" size="small" v-if="resumeDetail.statuss==0">预约面试</el-button>
        <el-button @click="getApplyTime(2)" size="small" type="danger" plain v-if="resumeDetail.statuss==0">不符合
        </el-button>
        <!--        end-->
        <!--        面试审核-->
        <!--          // statuss 0 简历待审核 1 待面试 2 简历驳回不符合 3 面试淘汰 4 考核中 5 录用 6 考核不通过 7 离职中 8 离职通过 9 离职驳回-->
        <el-button type="primary" @click="getInterviewPassed(1)" size="small"
                   v-if="resumeDetail.statuss==1&&OperationType=='InterviewReview'">开始面试
        </el-button>
<!--        <el-button @click="getInterviewPassed(2)" size="small" type="danger" plain-->
<!--                   v-if="resumeDetail.statuss==1&&OperationType=='InterviewReview'">不符合-->
<!--        </el-button>-->
      </div>
      <resumeApplyTime :visible.sync="resumeTimeVisible" :resumeId="resumeId"
                       :resumeName="resumeDetail.name" @getResumeDetail="getResumeDetail"></resumeApplyTime>
      <!--      面试通过填写考核内容-->
      <interviewPassed @getResumeDetail="getResumeDetail" :visible.sync="interviewPassedVisible"
                       :resumeId="resumeId"></interviewPassed>
      <!--      queryType 1 查看面试审核详情， 2 查看考核结果详情 -->
      <AppraisalPreview :queryType="queryType" :resumeId="resumeId" :visible.sync="PreviewVisible"></AppraisalPreview>
    </div>
  </div>
</template>

<script>
import resumeApplyTime from "./resumeApplyTime";
import interviewPassed from "./interviewPassed"; // 通过面试
import AppraisalPreview from "./AppraisalPreview";

export default {
  // OperationType 操作类型 InterviewReview 简历审核预约面试
  props: ['visible', 'resumeId', 'resumeType', 'OperationType'], // resumeType show 只查看不操作 ; resumeId 简历id
  components: {
    resumeApplyTime,
    interviewPassed,
    AppraisalPreview
  },
  data() {
    return {
      dialogVisible: false,
      PreviewVisible: false,
      resumeDetail: null,
      resumeTimeVisible: false,
      interviewPassedVisible: false,
      queryType: 0,
      interview_user: '', // 面试审核人
      assessment_user: ''// 考核完成
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('resumeId:', this.resumeId, this.OperationType)
        this.getResumeDetail()
      }
    }
  },
  created() {
  },
  methods: {
    async getResumeDetail(option) {
      // <!--        resumeType 1 查看简历 2 待处理的简历 3 待面试简历 4 考核中的应聘者 5 一录用应聘者-->
      // p 	整型 	必填 	1 	- 	页码
      // rercuit_sn 	字符串 	必填 	1 	- 	招聘发布编号
      // title 	字符串 	必填 	1 	- 	招聘名称
      // name 	字符串 	必填 	1 	- 	面试人
      // mobile_phone 	字符串 	必填 	1 	- 	面试人电话
      // status 	字符串 	必填 	1 	- 	0待审核1通过2驳回
      // recruit_id
      // let option = {
      //   p: this.page.pageindex
      // };
      // console.log('option:', option)
      // statuss 0 简历待审核 1 待面试 2 简历驳回不符合 3 面试淘汰 4 考核中 5 录用 6 考核不通过 7 离职中 8 离职通过 9 离职驳回
      let data = await this.$fetch(this.api.recruit.vitae.edit, {id: this.resumeId});
      if (!data.code) {
        if (data.vo.statuss >= 3) {
          let a = [];
          for (let i in data.vo.recruite.interview_user) {
            a.push(data.vo.recruite.interview_user[i].realname)
          }
          this.interview_user = a.join(','); // 面试审核人只能在状态大于3时
        }
        if (data.vo.statuss >= 5) {
          let a = [];
          for (let i in data.vo.recruite.employ_user) {
            a.push(data.vo.recruite.employ_user[i].realname)
          }
          this.assessment_user = a.join(','); // 面试审核人只能在状态大于3时
        }
        this.resumeDetail = data.vo;
        // 面试完刷新列表
        if (option === 'initDetail') {
          this.$emit('InitFn')
        }
        // 预约面试时间
        if(option==='appointment'){
          this.$emit('InitFn')
        }
        console.log('简历详情:', data)
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getApplyTime(option) {
      let n = this;
      if (option === 1) {
        this.resumeTimeVisible = true;
      } else {
        this.$prompt('驳回简历，填写驳回备注', '提示', {
          confirmButtonText: '确定并保存',
          cancelButtonText: '取消',
        }).then(({value}) => {
          console.log(value)
          n.rejectFn(value || '')
        }).catch(() => {
        });
      }
    },
    // 驳回简历
    async rejectFn(option) {
      let data = await this.$post(this.api.recruit.vitae.reject, {id: this.resumeId, reject_data: option});
      console.log('data:', data)
      if (!data.code) {
        this.getNewInitFn()
      } else {
        this.$message.error(data.msg)
      }
    },
    getNewInitFn() {
      this.getResumeDetail()
    },
    // 面试通过
    getInterviewPassed(option) {
      let n =this;
      if (option === 1) {
        this.interviewPassedVisible = true
      } else {
        this.$prompt('面试不符确认驳回，填写驳回备注', '提示', {
          confirmButtonText: '确定并保存',
          cancelButtonText: '取消',
        }).then(({value}) => {
          console.log(value)
          n.rejectUserFn(value || '')
        }).catch(() => {
        });
      }
    },
    // 驳回简历
    async rejectUserFn(option) {
      let data = await this.$post(this.api.recruit.interview.reject, {id: this.resumeId, content: option});
      console.log('data:', data)
      if (!data.code) {
        this.getNewInitFn()
      } else {
        this.$message.error(data.msg)
      }
    },
    showPreview(option) {
      this.queryType = option;
      this.PreviewVisible = true;
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 75%;
  height: 60%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.toolbarLine {
  text-align: center;
}

.resumeBody {
  display: flex;
  border-style: solid solid none;
  border-width: 1px;
  border-color: #ddd;
  margin-bottom: 40px;
}

.resumeBody-left {
  flex: 1;
}

.resumeBody-left-line {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  /*height: 50px;*/
  /*line-height: 49px;*/
}

/*.resumeBody-left-line:last-child{*/
/*  border-bottom:none;*/
/*}*/
.resumeBody-left-line-title {
  width: 120px;
  background: #eee;
  text-align: center;
  height: 70px;
  line-height: 70px;
}

.resumeBody-left-line-box {
  flex: 1;
  padding-left: 20px;
  /*padding: 10px 0 10px 20px;*/
}

.resumeBody-right {
  height: 213px;
  display: block;
  background: #ddd;
}

.resumeBody-right img {
  height: 100% !important;
}


.order-edit-timeline-content {
  display: flex;
  padding: 30px 10px;
}


.order-title span {
  display: block;
  width: 4px;
  height: 18px;
  background: #3377ff;
  margin-right: 10px;
  border-radius: 2px;
}

.order-edit-timeline-content {
  display: flex;
}

.order-edit-timeline-list {
  flex: 1;
  font-size: 12px;
}

.list-content {
  display: flex;
  align-items: center;
  position: relative;
  height: 2px;
  margin-bottom: 20px;

}

.list-content .iconfont {
  position: absolute;
  background: #fff;
  left: 50%;
  top: 0;
  margin-left: -8px;
  margin-top: -7px;
  /*margin: -50% -50%;*/
  /*transform:translate(-50%,-50%);*/
  color: #c1c4cc;
}

.orderActive .iconfont {
  color: #3377ff;
  font-size: 18px;
  margin-top: -9px;
}

.list-content-left {
  flex: 1;
}

.list-content-right {
  flex: 1;
}

.border-not-arrived {
  border-bottom: 2px dashed #c1c4cc;
}

.border-arrived {
  border-bottom: 3px solid #dae3fe;
}

.title-content {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 10px;
  color: #999;
}

.time-content p:nth-child(1) {
  color: #6396fb;
}

.time-content p {
  color: #555;
}

.time-content p span {
  cursor: pointer;
  color: #1b8de5;
  text-decoration: underline;
}
.time-content p em {
  font-style: normal;
}
.orderActive .title-content {
  color: #333;
}

.time-content {
  text-align: center;
}

.orderActive .time-content {
  color: #333;
}

.data-list-img img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.disier-box-timeline-list span:first-child {
  flex: 1;
}

.disier-box-timeline-list span:last-child {
  color: #3377ff;
  cursor: pointer;
}

/*end*/
/*.pulse {*/
/*  background: rgba(239, 45, 2, 0.6) !important;*/
/*  -webkit-animation: warn 0.9s ease-out;*/
/*  -moz-animation: warn 0.9s ease-out;*/
/*  animation: warn 0.9s ease-out;*/
/*  animation-iteration-count: 1;*/
/*  -webkit-animation-iteration-count: infinite;*/
/*  -moz-animation-iteration-count: infinite;*/
/*  animation-iteration-count: infinite;*/
/*  box-shadow: 1px 1px 30px #EF2D02;*/
/*}*/
/*.pulse, .pulse-big {*/
/*  position: absolute;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  border: 2px solid #EF2D02;*/
/*  background: rgba(239, 45, 2, 0.8);*/
/*  border-radius: 50%;*/
/*  z-index: 100;*/
/*  opacity: 0;*/
/*  top: -15px;*/
/*  left: -16px;*/
/*}*/
.pulse, .pulse-big {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid #37f;
  background: rgba(239, 45, 2, 0.8);
  border-radius: 50%;
  z-index: 9;
  opacity: 0;
  top: -16px;
  left: -16px;
}

.pulse {
  background: rgba(40, 118, 238, 0.6) !important;
  -webkit-animation: warn 0.9s ease-out;
  animation: warn 0.9s ease-out;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-box-shadow: 1px 1px 30px #EF2D02;
  box-shadow: 1px 1px 30px #37f;
}

@keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.check-paytype {
  margin-left: 5px;
  color: #6396fb;
  cursor: pointer;
}

.viewerImg {
  width: 50px;
  cursor: pointer;
}

.title-status {
  position: relative;
}

.title-status span {
  cursor: pointer;
  position: absolute;
  top: -5px;
  right: 0;
  color: #6396fb;
  font-size: 14px;
  padding: 0 10px;
}
</style>

